<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld"%>
<!DOCTYPE html>
<html>
<head>
<title>菜单人员</title>
<!-- 引入公用Js与Css -->
<%@include file="/view/common/resource.jsp"%>
</head>
<body>

	<div id="wrap">
		<div style="margin-bottom:5px;" class="clearfix mt10 mr10 ml20">
			<form id="roleForm" class="form-horizontal"
				action="<%=basePath%>/sys/role/allotMemberSave" method="post">
				<input type="hidden" name="id" value="${role.id }">
				<input type="hidden" id="checkedMember" name="checkedMember">
				
				<p class="radius3 bg_blue text-center w200 line-height30 mt10">
					<a href="javascript:" onclick="updateSave();"
						class="color_white show">确认分配</a>
				</p>
				<div class="pull-left pt10">
					<select multiple id="select1" class="form-control" style="width: 310px;height:360px;">
						<c:forEach var="item" items="${allMem }">
							<option value="${item.id }">${item.memName}【${item.memTrueName}】</option>
						</c:forEach>
					</select>
				</div>

				<div class="pull-right pt10">
					<select multiple id="select2"  class="form-control" style="width: 310px;height:360px;">
						<c:forEach var="item" items="${selectedMem }">
							<option value="${item.id }">${item.memName}【${item.memTrueName}】</option>
						</c:forEach>
					</select>
				</div>

				<div class="pt10 pl40 pt100"
					style="float:center; display:inline-block">
					<p class="radius3 bg_blue text-center w80 line-height30 mt10">
						<a href="javascript:" id="add" class="color_white show"> 添加 >> </a>
					</p>

					<p class="radius3 bg_blue text-center w80 line-height30 mt70">
						<a href="javascript:" id="remove" class="color_white show"> << 移除
						</a>
					</p>
				</div>
			</form>
		</div>

	</div>
	<script type="text/javascript">
		
			$(function(){
			
				//移到右边	 
				$('#add').click(function() {
					var selectList2 = $("#select2").children();//右边选择框子节点
					var selectList1 = $('#select1 option:selected');//左边选择框选中节点	

					for (var j = 0; j < selectList1.length; j++) {
						var selectOption = selectList1.eq(j);//循环选中某一个节点
						var isRepeat = false;//默认不重复
						for (var i = 0; i < selectList2.length; i++) {
							if (selectList1[j].value == selectList2[i].value) {
								isRepeat = true;
								break;
							}
						}
						if (selectList2.length < 1 || isRepeat == false) {
							selectOption.clone().prependTo('#select2');
						}
					}
					
					selectList1.remove();
				});
				
				//移到左边	 
				$('#remove').click(function() {
					var selectList1 = $("#select1").children();//右边选择框子节点
					var selectList2 = $('#select2 option:selected');//左边选择框选中节点	

					for (var j = 0; j < selectList2.length; j++) {
						var selectOption = selectList2.eq(j);//循环选中某一个节点
						var isRepeat = false;//默认不重复
						for (var i = 0; i < selectList1.length; i++) {
							if (selectList2[j].value == selectList1[i].value) {
								isRepeat = true;
								break;
							}
						}
						if (selectList1.length < 1 || isRepeat == false) {
							selectOption.clone().prependTo('#select1');
						}
					}
					
					selectList2.remove();
				});
				
				//左边双击选项	  
				$('#select1').dblclick(function() {
					var selectList2 = $("#select2").children();
					var isRepeat = false;//默认不重复
					var thisOption = $("option:selected", this);

					for (var i = 0; i < selectList2.length; i++) {
						if (thisOption[0].value == selectList2[i].value) {
							isRepeat = true;
							break;
						}
					}

					if (selectList2.length < 1 || isRepeat == false) {
						thisOption.clone().prependTo('#select2');
					}
					thisOption.remove();
				});
				//右边双击选项       
				$('#select2').dblclick(function() {
					var selectList1 = $("#select1").children();
					var isRepeat = false;//默认不重复
					var thisOption = $("option:selected", this);

					for (var i = 0; i < selectList1.length; i++) {
						if (thisOption[0].value == selectList1[i].value) {
							isRepeat = true;
							break;
						}
					}

					if (selectList1.length < 1 || isRepeat == false) {
						thisOption.clone().prependTo('#select1');
					}
					thisOption.remove();
				});
			});
			
			/* 数据保存 */
			function updateSave() {

				var memberIds = "";
				var selectList2 = $("#select2").children();//右边选择框子节点
				for (var i = 0; i < selectList2.length; i++) {
					memberIds = memberIds + selectList2[i].value;
					if (i != selectList2.length - 1) {
						memberIds = memberIds + ",";
					}
				}
				// 将选中的人员保存
				$("#checkedMember").val(memberIds);

				var actionurl = $('#roleForm').attr('action');//提交路径

				$("#roleForm").ajaxSubmit({
					type : "post",
					url : actionurl,
					dataType : "json",
					success : function(data) {
						if (data.success) {
							// 成功后跳转首页
							layer.msg("人员分配成功", {
								icon : 6,
								time : 1000
							}, function() {
								/* var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
								parent.layer.close(index); */
								window.location.reload();
							});
						} else {
							// 失败提醒
							layer.msg(data.msg, {
								icon : 5
							});
						}
					}
				});
			}
		</script>
</body>
</html>
